<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-col>
          <!-- <el-card :style="{marginTop:'80px',marginBottom:'20px'}">
            添加设备
          </el-card> -->
        </el-col>
        <el-input placeholder="Filter keyword" v-model="filterText" style="margin-bottom:30px;"></el-input>
  
        <el-tree class="filter-tree" :data="data2" :props="defaultProps" default-expand-all :filter-node-method="filterNode" ref="tree2">
          <span class="custom-tree-node" slot-scope="{ node, data }" >
                    <span >{{ node.label }}</span>
          <span>
                       <el-button
                        type="text"
                        size="medium"
                        @click.stop = "showDetail(data.id,$event,data.children)">
                        详情
                      </el-button>
                    </span>
          </span>
        </el-tree>
  
      </el-col>
      <el-col :span="18">
        <detail :style="{marginLeft:'10%'}"   v-show="show_hide" v-bind:detailId="this.detailId" :nowChildren="nowChildren"></detail>
  
      </el-col>
    </el-row>
  
    <!-- <el-button type="text" @click="open3">点击打开 Message Box</el-button> -->
  </div>
</template>

<script>
  import detail from './work_detail.vue'
  import {
    treeDataTranslate
  } from '../../utils/Fromatetree.js'
  import {
    getDevice,
    createDeivce,
    updataDevice
  } from '@/api/table'
  export default {
    watch: {
      filterText(val) {
        this.$refs.tree2.filter(val)
      }
    },
    //  data2: [{
    //       id: 1,
    //       label: 'Level one 1',
    //       children: [{
    //         label: 'Level two 1-1',
    //         children: [{
    //           id: 9,
    //           label: 'Level three 1-1-1'
    //         },
    //         {
    //           id: 10,
    //           label: 'Level three 1-1-2'
    //         }
    //         ]
    //       }]
    //     },]
    created() {
      const result = getDevice()
        .then((e) => {
          console.log(e)
          this.data2 = e
          console.log(e.data)
          // const res = e.data(function(item, index, input) {
          //   return item
          // })
          const treeResult = treeDataTranslate(e.data)
          // result = treeDataTranslate(e.data)qwe
          // for (var x = 0; x < e.data.length; x++) {
          //   e.data[x]
          // }
  
          console.log('======result======')
          console.log(treeResult)
          this.data2 = treeResult
        }).catch((e) => {
          console.log(e)
        })
    },
    methods: {
      EndDeviceList() {
  
      },
      open3() {
        this.$prompt('请输入设备名', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({
          value
        }) => {
          this.CreateDevice()
          this.$message({
            type: 'success',
            message: '你的邮箱是: ' + value
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
      },
      //  treeid:data.treeid,
      //  DeviceName :data.name,
      //  parentId:data.parentId
      CreateDevice(data) {
        const result = createDeivce(data)
          .then((e) => {
            console.log(e)
          }).catch((e) => {
            console.log(e)
          })
      },
      appendC(node, data) {
        console.log(node)
        console.log('====data===')
        console.log(data)
        // const TreeDate = {
        //   treeid: data.treeid,
        //   DeviceName: name,
        //   parentId: parentId
        // }
        this.open3()
      },
      showDetail(id, event, children) {
        console.log("children", children);

        // console.log('showDetail', event)
        // console.log(this.show_hide)
        // event.currentTarget.parent.children.map((item)=>{
        //       item.style.backgroundColor = "blue"
        // })
        //  event.currentTarget.style.backgroundColo="red";

        // console.log("node",node)
        // node.checked = true;
        this.nowChildren = children
        this.show_hide = true
        this.detailId = id
        console.log('detailID', this.detailId)
      },
      filterNode(value, data) {
        if (!value) return true
        return data.label.indexOf(value) !== -1
      },
      append(data) {
        console.log('append')
        console.log(data)
        // const newChild = { id: id++, label: 'testtest', children: [] }
        if (!data.children) {
          this.$set(data, 'children', [])
        }
        // data.children.push(newChild)
      },
      remove(node, data) {
        console.log('remove')
        console.log(data)
        const parent = node.parent
        const children = parent.data.children || parent.data
        const index = children.findIndex(d => d.id === data.id)
        children.splice(index, 1)
      }
    },
    components: {
      'detail': detail
    },
    data() {
      return {
        show_hide: false,
        filterText: '',
        nowChildren:"",
        data2: [{
          id: 1,
          label: 'Level one 1',
          children: [{
            label: 'Level two 1-1',
            children: [{
              id: 9,
              label: 'Level three 1-1-1'
            },
            {
              id: 10,
              label: 'Level three 1-1-2'
            }
            ]
          }]
        },
        {
          id: 2,
          label: 'Level one 2',
          children: [{
            id: 5,
            label: 'Level two 2-1'
          },
          {
            id: 6,
            label: 'Level two 2-2'
          }
          ]
        },
        {
          id: 3,
          label: 'Level one 3',
          children: [{
            id: 7,
            label: 'Level two 3-1'
          },
          {
            id: 8,
            label: 'Level two 3-2'
          }
          ]
        }
  
        ],
        detailId: '',
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    }
  }
</script>

